<template>
  <div>
    <nav-header></nav-header>
    <div class="data-statistic">
      <!--头部信息-->
      <div class="hearder">
        <div class="peo-pic">
          <img :src="userName.avatarUrl" v-if="userName.avatarUrl"/>
          <img src="../assets/images/default1.png" v-else/>
        </div>
        <h3 class="peo-name">{{userName.nickname}}</h3>
        <div class="peo-icon" v-if="userName.user_character == 0">
          <img src="../assets/images/V1.jpg"/>
        </div>

        <div class="title-box" :class="{selectEdi:selectShow}">
          <span class="title" v-show="!isShow">{{signature}}</span>
          <input class="title" type="text" v-model="signature" v-show="isShow" @blur="setSignature" maxlength="20">
          <svg class="icon" aria-hidden="true" @click="handleEdiClick()">
            <use xlink:href="#icon-edit"></use>
          </svg>
        </div>
      </div>
      <!--数据展示-->
      <div class="showdata">
        <ul>
          <li>
            <p class="showdata-number-no" v-if="!numData.fansCount && !numData.fansNum">暂无数据</p>
            <p class="showdata-number" v-else>{{numData.fansCount}}/<em>{{numData.fansNum}}</em></p>
            <p class="showdata-info">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-users"></use>
              </svg>
              <span>粉丝量/昨日新增</span>
            </p>
          </li>
          <li>
            <p class="showdata-number-no" v-if="!numData.viewCount && !numData.viewNum">暂无数据</p>
            <p class="showdata-number" v-else>{{numData.viewCount}}/<em>{{numData.viewNum}}</em></p>
            <p class="showdata-info">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-eye"></use>
              </svg>
              <span>浏览量 /昨日新增</span>
            </p>
          </li>
          <li>
            <p class="showdata-number-no" v-if="!numData.commentCount && !numData.commentNum">暂无数据</p>
            <p class="showdata-number" v-else>{{numData.commentCount}}/<em>{{numData.commentNum}}</em></p>
            <p class="showdata-info">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-message"></use>
              </svg>
              <span>评论量/昨日新增</span>
            </p>
          </li>
          <li>
            <p class="showdata-number-no" v-if="!numData.shareCount && !numData.shareNum">暂无数据</p>
            <p class="showdata-number" v-else>{{numData.shareCount}}/<em>{{numData.shareNum}}</em></p>
            <p class="showdata-info">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-share-"></use>
              </svg>
              <span>分享量/昨日新增</span>
            </p>
          </li>
        </ul>
      </div>
      <!--最新编辑-->
      <div class="new-edit_no" v-if="newEdiData.length == 0">
        尚无编辑文章，开始写吧
      </div>

      <div class="new-edit" v-else>
        <div class="area-title">最新编辑</div>
        <div class="new-edit_text clearfix" v-for="item in newEdiData">
          <div class="pic">
            <img :src="item.coverUrl" v-if="item.coverUrl"/>
            <img src="../assets/images/default2.png" v-else/>
          </div>
          <div class="info">
            <h3 class="title">{{item.title}}</h3>
            <p class="text">{{item.origContent}}</p>
            <div class="detail">
              <span class="time" v-time:time="item.updateTime">最后编辑：{{item.updateTime}}</span>
              <span class="form">所属文件夹：{{item.folderName}}</span>
            </div>
            <!--						<button class="cancel-btn" @click="goToArt(item.articleId)">编辑文章</button>-->
          </div>
        </div>
      </div>
      <!--已发文章-->
      <div class="old-article">
        <div class="area-title">已发文章</div>
        <div class="article-no" v-if="SendArticleData.length == 0">您还没有正式发布过文章</div>
        <ul v-else>
          <li v-for="item in SendArticleData">
            <div class="article-title">{{item.title}}</div>
            <div class="article-time" v-time2:time="item.updateTime">{{item.updateTime}}</div>
            <div class="article-detail">
							<span>
    						<svg class="icon" aria-hidden="true">
							  	<use xlink:href="#icon-eye"></use>
							</svg>
						{{item.readCount}}
    					</span>
              <span>
    						<svg class="icon" aria-hidden="true">
							  	<use xlink:href="#icon-message"></use>
							</svg>
						{{item.commentCount}}
    					</span>
              <span>
    						<svg class="icon" aria-hidden="true">
							  	<use xlink:href="#icon-share-"></use>
							</svg>
						{{item.shareCount}}
    					</span>
            </div>
          </li>
        </ul>
        <!--按钮-->
        <div class="cancel-btn more-article" @click="lodeMore()" v-if="SendArticleData.length && loadMore">载入更多文章</div>
        <div class="cancel-btn more-article no-more" v-if="SendArticleData.length && !loadMore">没有更多文章</div>
      </div>

    </div>
  </div>
</template>
<script>
  import util from '../lib/util'
  import NavHeader from '@/components/NavHeader'

  export default {
    name: 'Index',
    components: {
      NavHeader,
    },
    data() {
      return {
        loadMore: true,
        pageNo: 1,
        signature: '',
        isShow: false,
        selectShow: false,
        userName: '',
        numData: {},
        newEdiData: [],
        SendArticleData: []
      }
    },
    created() {
      this.getUserInfo();
      this.newEdi();
      this.SendArticle(this.pageNo);
      this.getNumData();
    },
    computed: {},
    methods: {

      //
//			signatureNum() {
//				if(this.signature.length > 20){
//					this.signature = this.signature.substring(0, 20);
//					this.$message({
//			          	message: '最多输入20个字',
//			          	type: '',
//			          	center: true,
//			          	customClass: 'self-tips-three',
//			          	duration: 1000
//			        });
//				}
//			},
      //获取当前用户
      getUserInfo() {
        util.ajax.get('getUserInfo').then((res) => {

          this.userName = res.data;
          this.signature = res.data.signature;
        })
      },
      handleEdiClick() {
        this.selectShow = true;
        this.isShow = !this.isShow;
      },

      //改签名
      setSignature() {
        this.selectShow = false;
        this.isShow = !this.isShow;
        util.ajax.post('user/update', {
          'signature': this.signature
        }).then((res) => {

        })
      },
      // 加载更多
      lodeMore() {
        if (this.loadMore == true) {
          this.SendArticle(this.pageNo);
        }

      },
      //获取各种数据
      getNumData() {
        let that = this;
        util.ajax.get('statistics/overview').then((res) => {
          if (res.code == 1) {

            that.numData = res.data;
            var data = res.data;
            for (let p in data) {
              if (that.numData.hasOwnProperty(p)) {
                that.numData[p] = parseInt(that.numData[p]);
              }
            }
          }

        })
      },
      //最新编辑
      newEdi() {
        util.ajax.post('article/list', {
          'pageNo': 1,
          'pageSize': 1,
          'folderId': 0,
          'isPublish': -1,
          'orderType': 1,
          'orderWith': 1,
          'isDel': 0
        }).then((res) => {

          this.newEdiData = res.data.list;
        })
      },
      //已发文章
      SendArticle(pageNo) {
        util.ajax.post('article/list', {
          'pageNo': pageNo,
          'pageSize': 10,
          'folderId': 0,
          'isPublish': 1,
          'orderType': 1,
          'orderWith': 1
        }).then((res) => {
          if (res.data) {
            if (res.data.list.length == 10) {
              this.loadMore = true;
              this.pageNo = this.pageNo + 1;
            } else {
              this.loadMore = false;
            }
            this.SendArticleData = this.SendArticleData.concat(res.data.list);

          }
        })
      },
      goToArt: function (id) {
        this.$router.push({name: 'Article', params: {artId: id}});
      },

    }
  }
</script>
<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .data-statistic {
    min-width: 1000px;
    position: absolute;
    top: 83px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: $colorWhite;
    margin: 0 auto;
    /*width: 1200px;*/
    /*max-width: 1300px;*/
   overflow:auto;
    .hearder {
      @include block-height(69px);
      border-bottom: 1px solid #ccc;
      div {
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
      }
      img {
        width: 100%;
        display: block;
      }
      .peo-pic {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: 0 10px 0 40px;
      }
      .peo-name,
      .title-box {
        font-weight: normal;
        display: inline-block;
      }
      .title-box {
        position: relative;
        margin-left: 35px;
        border: 1px solid $borderbottomColor;
        height: 30px;
        line-height: 30px;
        padding: 0px 15px;
        border-radius: 15px;
        .title {
          display: inline-block;
          width: 400px;
          border: none;
          height: 30px;
          line-height: 30px;
          font-size: 16px;
          color: $listTitleColor;
          letter-spacing: 0.2px;
        }
        .icon {
          position: absolute;
          right: 15px;
          top: 7px;
          display: none;
          color: $listborderColor;
        }
        &:hover {
          .icon {
            display: block !important;
          }
        }
      }
      .selectEdi {
        margin-left: 35px;
        border: 1px solid $mainborderColor;
        height: 30px;
        line-height: 30px;
        padding: 0px 15px;
        border-radius: 15px;
        .icon {
          position: absolute;
          right: 15px;
          top: 7px;
          display: none;
        }
        &:hover {
          .icon {
            display: none !important;
          }
        }
      }
      .peo-icon {
        width: 20px;
        height: 17px;
        margin: 0 35px 0 5px;
      }
      .peo-icon-edi {
        margin-left: 10px;
        display: inline-block;
        height: 30px;
        width: 30px;
        border: 1px solid $listborderColor;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
        background: $borderbottomColor;
        .icon {
          color: $vfConcentColor;
        }
        &:hover {
          background: $colorWhite;
          border: 1px solid $mainborderColor;
          .icon {
            color: $mainborderColor;
          }
        }
      }
    }
    .showdata {
      width: 100%;
      overflow: hidden;
      ul {
        width: auto;
        margin: 20px 0;
        display: flex;
        justify-content: space-around;
        li {
          width: 25%;
          padding: 12px 0 8px 0;
          border-right: 1px solid #ccc;
          box-sizing: border-box;
          &:last-child {
            border-right: none;
          }
          p {
            width: 100%;
            text-align: center;
            &.showdata-number {
              font-size: 24px;
              color: $listTitleColor;
              line-height: 40px;
              em {
                color: $borderColor;
                font-style: normal !important;
              }
            }
            &.showdata-number-no {
              font-size: 18px;
              line-height: 40px;
              color: $listborderColor;
            }
            &.showdata-info {
              font-size: 16px;
              color: $listTitleColor;
              line-height: 20px;
              .icon {
                position: relative;
                top: 2px;
                width: 20px;
                height: 20px;
                color: $listborderColor;
              }
            }
          }
        }
      }
    }
    /*最新编辑*/
    .new-edit_no {
      width: 100%;
      line-height: 130px;
      text-align: center;
      font-size: $fs16;
      color: $listTitleColor;
      background: $borderbottomColor;
    }
    .new-edit {
      position: relative;
      overflow: hidden;
      background: #F6F6F6;
      padding: 20px 20px 10px 20px;
      @root-at .area-title {
        font-size: 16px;
        color: $listTitleColor;
        line-height: 30px;
      }
      .new-edit_text {
        margin: 14px 0;
        .pic {
          overflow: hidden;
          float: left;
          width: 160px;
          height: 100px;
          margin-right: 20px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          overflow: hidden;
          .title {
            font-size: 18px;
            color: $listTitleColor;
            line-height: 30px;
            font-weight: normal;
          }
          .text {
            font-size: 14px;
            color: $vfConcentColor;
            line-height: 20px;
            height: 40px;
            margin-top: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
          }
          .detail {
            font-size: 12px;
            color: $listTitleColor;
            line-height: 20px;
            margin-top: 8px;
            span {
              margin-right: 60px;
            }
          }
          button {
            display: none;
            position: absolute;
            right: 10px;
            bottom: 14px;
            margin-right: 10px;
            width: 100px;
            height: 32px;
            line-height: 30px;
            font-size: $fs14;
          }
        }
        &:hover {
          button {
            display: block !important;
          }
        }
      }
    }
    /*已发文章*/
    .old-article {
      min-width: 1000px;
      overflow: hidden;
      padding: 20px 20px 10px 20px;
      .area-title {
        font-size: 18px;
        color: $listTitleColor;
        line-height: 30px;
      }
      .article-no {
        width: 100%;
        line-height: 200px;
        font-size: $fs16;
        color: $listTitleColor;
        text-align: center;
        border: 1px solid $borderbottomColor;
      }
      ul {
        margin-top: 10px;
        min-width: 1000px;
        li {
          font-size: 14px;
          height: 16px;
          line-height: 16px;
          padding: 10px 0;
          margin-bottom: 3px;
          color: $vfConcentColor;
          border-bottom: 1px solid #ccc;
          .article-title {
            margin-right: 20px;
            width: 50%;
            text-indent: 1em;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
          }
          .article-time {
            width: 200px;
            float: left;
          }
          .article-detail {
            float: right;
            width: 270px;
            span {
              float: left;
              display: block;
              width: 90px;
            }
          }
        }
      }
    }
    .more-article {
      width: 200px;
      margin: 20px auto;
    }
    .no-more {
      border-color: $listborderColor;
      color: $listborderColor;
    }

  }
</style>
